<template>
  <div class="select-category">
    <Alert>
      当前选择: <span
        :key='index'
        v-for="(item,index) in active"
      > {{list[index][item].title}} </span>
    </Alert>

    <select
      class="ji-lian"
      :key="index"
      size="20"
      v-for="(item,index) in list"
    >
      <option
        v-for="(items,i) in item"
        :key="i"
        :selected="active[index]==i"
        @click="handleOptions(index, i,items.id)"
        :value="items.id"
      >{{items.title}}</option>
    </select>
  </div>
</template>

<script>
import { getCategory } from "@/api/data";

export default {
  name: "select_category",
  components: {},
  props: ["select_category_data"],
  data() {
    return {
      active: [],
      step: [],
      list: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    init() {
      if (this.select_category_data) {
      }
    },
    handleOptions(index, index1, id) {
      this.$set(this.active, index, index1);
      let step = this.step;
      var step1 = step.filter(val => {
        return val.pid == id;
      });
      this.active.splice(index + 1, 1);
      if (step1.length > 0) {
        this.list.splice(index + 1, 1);
        this.$set(this.list, index + 1, step1);
      }
      var data = [];
      this.list.forEach((val, index) => {
        if (this.active[index]) data.push(val[this.active[index]].id);
      });
      this.$emit("on-select-category", data);
    },
    getData() {
      getCategory().then(res => {
        this.step = res.data;
        var step1 = res.data.filter(val => {
          return val.pid == 0;
        });
        this.$set(this.list, 0, step1);
        this.init();
      });
    }
  }
};
</script>
<style scoped>
.select-category {
  min-height: 600px;
  width: 100%;
  overflow-x: auto;
}
.ji-lian {
  width: 100px;
  margin: 20px 25px 0 0;
  overflow: auto;
}
</style>
